<template>
	<div class="layout">
		<div class="caseListDiv">
			<div style="display: flex; justify-content: space-between; margin-top: 20px">
				<Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
        <Buttons @goBack="goBack()" :buttons="buttons"></Buttons>
			</div>
			<div class="title">帮扶成功案例</div>
			<div class="tableDiv">
				<div class="rowDiv headDiv">
					<div class="cellDiv" style="width: 30%">帮扶需求公司</div>
					<div class="cellDiv" style="width: 20%">标题</div>
					<div class="cellDiv" style="width: 15%">招工需求</div>
					<div class="cellDiv" style="width: 15%">招工人数</div>
					<div class="cellDiv" style="width: 20%; border-right: 0">招工时间</div>
				</div>
				<div v-for="(item, index) in supportCaseList" class="rowDiv" :style="index == 9 ? 'border-bottom: 0' : ''">
					<div class="cellDiv" style="width: 30%">{{item.companyName}}</div>
					<div class="cellDiv caseName" style="width: 20%" @click="toHelpCaseDetail(item)">{{item.name}}</div>
					<div class="cellDiv" style="width: 15%">{{item.post}}</div>
					<div class="cellDiv" style="width: 15%">{{item.amount + '人'}}</div>
					<div class="cellDiv" style="width: 20%; border-right: 0">{{item.beginDate + ' 至 ' + item.endDate}}</div>
				</div>
			</div>
			<div id="policyPagination">
				<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageNum"
						:page-sizes="[10, 20, 30, 50]"
						:page-size="pageSize"  background
						layout="total, sizes, prev, pager, next, jumper"
						:total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import Breadcrumb from '@/components/breadcrumb'
	//api
	import {request} from '@/utils/request.js'
	import config from '@/utils/config.js'

	export default {
		name: "helpCaseList",
		meta:{
			name: '帮扶成功案例列表页'
		},
		components: { Breadcrumb},
		data() {
			return {
        buttons:[{text:"返回",type:"normal",size:"s",method:"goBack"}],
				crumbs: [{
					label: '首页',
					value: 'index'
				}, {
					label: '企业帮扶',
					value: 'help'
				}, {
					label: '帮扶成功案例',
					value: 'helpCaseList',
					choose: true
				}],
				pageNum: 1, //当前页
				pageSize: 10, //每页条数
				total: null, //总条数
				supportCaseList: [
					// {
					// 	id: 1,
					// 	companyName: '企业名称企业名称企业名称企业名称', //公司名称
					// 	name: '关于企业用工出现的困难', //标题
					// 	post: '仓库保管员', //招聘岗位
					// 	amount: 30, //招工人数
					// 	beginDate: '2020-01-05', //招工开始时间
					// 	endDate: "2020-01-05" //招工结束时间
					// }
				]
			}
		},
		// mounted(){
		// 	this.getHelpCaseList();
		// },
		activated(){
			this.getHelpCaseList();
		},
		methods: {
			// 获取帮扶案例列表
			async getHelpCaseList(){
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				const { code, msg, rows, total} = await request(this, config.api.supportCaseList, data, 'GET');
				if(code != '200') return this.$message.warning(msg);
				this.supportCaseList = rows;
				this.total = total;
			},
			// 改变每页大小
			handleSizeChange(e){
				this.pageSize = e;
				this.getHelpCaseList();
			},
			// 改变当前页
			handleCurrentChange(e){
				this.pageNum = e;
				this.getHelpCaseList();
			},
			/**
			 * 跳转到案例公示详情页
			 * @param helpCase
			 */
			toHelpCaseDetail(helpCase) {
				this.$router.push({path: 'helpCaseDetail', query: {id: helpCase.id}});
			},
			/**
			 * 返回上一页
			 */
			 goBack() {
				// this.$router.back();
				this.$router.push({ path: 'help' });
			}
		}
	}
</script>

<style scoped>
	.layout {
		min-height: 100vh;
		position: relative;
		padding-bottom: 150px;
		box-sizing: border-box;
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.caseListDiv {
		width: 1000px;
		margin: 0 auto;
	}

	.caseListDiv .backBtn {
		border: 1px solid #eeeeee;
		white-space: nowrap;
		font-size: 12px;
		height: 30px;
		width: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
	}

	.caseListDiv .backBtn:hover {
		cursor: pointer;
		box-shadow: 0px 0px 5px #EEEEEE;
	}

	.caseListDiv .title {
		font-size: 20px;
		text-align: left;
		font-weight: bold;
		border-bottom: 2px solid #045db9;
		padding: 10px;
		padding-top: 20px;
		color: #045db9;
	}

	.caseListDiv .tableDiv {
		margin: 30px 0;
		border: 1px solid #eeeeee;
		color: #666666;
		font-size: 12px;
	}

	.caseListDiv .tableDiv .rowDiv {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eeeeee;
	}

	.caseListDiv .tableDiv .headDiv {
		background-color: #f4f4f4;
	}

	.caseListDiv .tableDiv .rowDiv .cellDiv {
		padding: 10px;
		border-right: 1px solid #eeeeee;
		text-align: left;
		transition: all 0.2s ease 0s;
		word-wrap: break-word;
		box-sizing: border-box;
	}

	.caseListDiv .tableDiv .rowDiv:hover .cellDiv {
		background-color: #fcfcfc;
	}

	.caseListDiv .tableDiv .rowDiv .caseName:hover {
		text-decoration: underline;
		color: #045db9;
		cursor: pointer;
	}

	#policyPagination {
		text-align: right;
		margin-bottom: 30px;
	}
</style>
